import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { Table, Button, Modal } from 'antd';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import type { FilterValue, SorterResult } from 'antd/es/table/interface';
import moment from 'moment';

import {
  DataType,
  GetCoupon,
  getMyCouponAPI,
  getUserNoCouponAPI,
  receiveCouponAPI,
} from '@/service/coupon';

const queryPage: GetCoupon = {
  current: 1,
  size: 10,
  restaurantId: 1,
  sortField: '',
  sortOrder: '',
  userId: 7,
};

const App: React.FC = () => {
  const [data, setData] = useState<DataType[]>();

  const columns: ColumnsType<DataType> = useMemo(
    () => [
      {
        title: '优惠券名称',
        dataIndex: 'title',
        sorter: true,
        render: (title) => `${title}`,
        width: '10%',
      },
      {
        title: '折扣',
        dataIndex: 'discount',
        render: (discount) => `${discount}`,
        width: '10%',
      },
      {
        title: '开始时间',
        dataIndex: 'startTime',
        sorter: true,
        render: (startTime) => `${startTime}`,
        width: '20%',
      },
      {
        title: '结束时间',
        dataIndex: 'endTime',
        sorter: true,
        render: (endTime) => `${endTime}`,
        width: '20%',
      },
      {
        title: '是否使用',
        dataIndex: 'status',
        sorter: true,
        render: (status) => {
          if (status === 0) {
            return '未使用';
          } else {
            return '已使用';
          }
        },
      },
      {
        title: '是否过期',
        width: '15%',
        render: (_, record) => {
          if (
            moment(record.endTime).format('YYYY-MM-DD') <
            moment().format('YYYY-MM-DD')
          ) {
            return '已过期';
          } else {
            return '未过期';
          }
        },
      },
    ],
    [],
  );

  //发送查询请求
  const fetchData = useCallback(async () => {
    setData([]);
    const res = await getMyCouponAPI(7);
    setData(res);
  }, []);

  //监听tableParams的变化
  useEffect(() => {
    fetchData();
  }, []);

  const getCoupon = async () => {
    const res = await getUserNoCouponAPI(queryPage);
    debugger;
    Modal.info({
      title: '领取用户',
      content: (
        <Table
          columns={[
            {
              title: '名称',
              dataIndex: 'title',
            },
            {
              title: '折扣',
              dataIndex: 'discount',
            },
            {
              title: '生效时间',
              dataIndex: 'startTime',
            },
            {
              title: '结束时间',
              dataIndex: 'endTime',
            },
            {
              title: '领取',
              width: '15%',
              render: (_, record) => {
                return (
                  <Button
                    onClick={async () => {
                      const res = await receiveCouponAPI({
                        userId: 7,
                        couponId: record.id,
                      });
                      fetchData(); // 刷新优惠券列表
                      Modal.destroyAll();
                    }}
                  >
                    领取
                  </Button>
                );
              },
            },
          ]}
          dataSource={res}
          pagination={false}
        />
      ),
    });
  };

  return (
    <div>
      <Button onClick={getCoupon} type="primary">
        领取优惠券
      </Button>
      <Table
        columns={columns}
        rowKey={(record) => record.id}
        dataSource={data}
        scroll={{ y: 530 }}
      />
    </div>
  );
};
export default App;
